<template>
  <div>
    <div class="header flex-row">
      <span class="flex-row-ver cur" @click="toPage(1)"><i>1</i>门店信息</span>
      <span class="flex-row-ver cur"><i>2</i>资质信息</span>
      <span class="flex-row-ver" @click="toPage(3)"><i>3</i>合作方案</span>
    </div>
    <div v-if="!$route.query.id" class="tell">
      您还没有完成第一步,请从第一步开始编辑，否在无法提交
    </div>
    <el-row class="item">
      <el-form :model="params" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" size="small">
        <el-row class="title">
          <el-form-item label="主体资质" required style="margin-bottom: 0;">
            <el-select v-model="params.maincert" placeholder="请选择是否有主体资质">
              <el-option label="暂无" value="0"></el-option>
              <el-option label="有" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <div class="list" v-if="params.maincert ==1">
          <el-form-item label="资质照片" prop="mainimg">
            <div class="upimg-wrap">
              <div class="list flex-row">
                <div class="update">
                  <el-upload class="avatar-uploader" action="/server/uploadUtil/upload" :show-file-list="false"
                             :headers="header" name="upfile" :on-error="handleAvatarError1"
                             :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1">
                    <img v-if="params.mainimg&&!upimgloading1" :src="'http://image.jiaowawang.cn/'+params.mainimg"
                         class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-button class="cat-img" type="text" @click="catMaxImg(params.mainimg)" v-if="params.mainimg"
                             size="mini" icon="el-icon-search"></el-button>
                  <div class="loading flex-row-ver" v-if="upimgloading1"><img src="assets/img/loading.gif"></div>
                </div>
                <div class="msg">
                  上传主体资质照片。<br/>证照照片需高清、完整、不能有遮掩，不能出现水印。(图片支持JPG、JPEG、PNG格式，<span style="color:#e6a23c">大小不超过5M</span>)
                </div>
                <div class="demo"><img src="assets/img/demo4.jpg" alt=""></div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="单位名称" prop="mainorgname">
            <el-input v-model="params.mainorgname" placeholder="请输入单位名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="法定代表人" prop="mainleader">
            <el-input v-model="params.mainleader" placeholder="请输入法定代表人" clearable></el-input>
          </el-form-item>
          <el-form-item label="注册号" prop="registernum">
            <el-input v-model="params.registernum" placeholder="请输入注册号" clearable></el-input>
          </el-form-item>
          <el-form-item label="注册地址" prop="registeraddress">
            <el-input v-model="params.registeraddress" placeholder="请输入注册地址" clearable></el-input>
          </el-form-item>
          <el-form-item label="有效期" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-checkbox style="margin-right: 50px;" v-model="isLongTime">长期</el-checkbox>
              <el-form-item prop="mainexpirationdate" v-if="!isLongTime">
                <el-date-picker v-model="params.mainexpirationdate" type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-form-item>
            </el-row>
          </el-form-item>
        </div>
        <el-row class="title" style="margin-top: 20px;">
          <el-form-item label="行业服务" required style="margin-bottom: 0;">
            <el-select v-model="params.tradecert" placeholder="请选择是否有行业服务" size="small">
              <el-option label="暂无" value="0"></el-option>
              <el-option label="有" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <div class="list" v-if="params.tradecert == 1">
          <el-form-item label="资质照片" prop="tradeimg">
            <div class="upimg-wrap">
              <div class="list flex-row">
                <div class="update">
                  <el-upload class="avatar-uploader" action="/server/uploadUtil/upload" :show-file-list="false"
                             :headers="header" name="upfile" :on-error="handleAvatarError2"
                             :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload2">
                    <img v-if="params.tradeimg&&!upimgloading2" :src="'http://image.jiaowawang.cn/'+params.tradeimg" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-button class="cat-img" type="text" @click="catMaxImg(params.tradeimg)" v-if="params.tradeimg" size="mini" icon="el-icon-search" />
                  <div class="loading flex-row-ver" v-if="upimgloading2"><img src="assets/img/loading.gif"></div>
                </div>
                <div class="msg">
                  上传行业资质照片。<br/>证照照片需高清、完整、不能有遮掩，不能出现水印。(图片支持JPG、JPEG、PNG格式，<span style="color:#e6a23c">大小不超过5M</span>)
                </div>
                <div class="demo"><img src="assets/img/demo5.jpg" /></div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="单位名称" prop="tradeorgname">
            <el-input v-model="params.tradeorgname" placeholder="单位名称" clearable />
          </el-form-item>
          <el-form-item label="法定代表人" prop="tradeleader">
            <el-input v-model="params.tradeleader" placeholder="请输入法定代表人" clearable />
          </el-form-item>
          <el-form-item label="许可证编号" prop="licensenum">
            <el-input v-model="params.licensenum" placeholder="请输入许可证编号" clearable />
          </el-form-item>
          <el-form-item label="许可证地址" prop="licenseaddress">
            <el-input v-model="params.licenseaddress" placeholder="请输入许可证地址" clearable />
          </el-form-item>
           <el-form-item label="食品安全等级" prop="checkresult">
            <el-select v-model="params.checkresult" placeholder="请输入食品安全等级检查结果" size="small" clearable>
              <el-option label="A" value="A" />
              <el-option label="B" value="B" />
              <el-option label="C" value="C" />
            </el-select>
          </el-form-item>
           <el-form-item label="经营范围" prop="businessscope">
            <el-input type="textarea" v-model="params.businessscope" maxlength="500" placeholder="请输入经营范围" clearable />
          </el-form-item>
          <el-form-item label="有效期" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-checkbox style="margin-right: 50px;" v-model="isLongTime1">长期</el-checkbox>
              <el-form-item prop="tradeexpirationdate" v-if="!isLongTime1">
                <el-date-picker v-model="params.tradeexpirationdate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" />
              </el-form-item>
            </el-row>
          </el-form-item>
        </div>
        <el-form-item style="margin-top: 40px">
          <el-button @click="toPage(1)">返回上一步</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">保存并到下一步</el-button>
        </el-form-item>
      </el-form>
      <el-dialog title="查看原图" v-dialogDrag :visible.sync="dialogVisible" width="1000px" :close-on-press-escap="true">
        <div style="width: 100%;text-align: center"><img :src="'http://image.jiaowawang.cn/'+maxImg" style="max-width: 100%" /></div>
      </el-dialog>
    </el-row>
    <div v-if="infoLoading" class="info-loading-addShop"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        header: { // 上传请求头
          token: JSON.parse(sessionStorage.getItem('loginMsg')).token,
          expire: JSON.parse(sessionStorage.getItem('loginMsg')).expire
        },
        isLongTime: false, // 是否长期有效
        isLongTime1: false, // 是否长期有效
        infoLoading: false, // 页面等待info数据
        issubmitLoading: false, //提交等待
        dialogVisible: false, // 查看图片
        upimgloading1: false, // 上传图片等待
        upimgloading2: false, // 上传图片等待
        maxImg: '', // 当前被查看图片
        params: {
          maincert: '0', // 是否有主题资质 暂无（null或者0）,有（1）
          mainimg: '', // 主体资质照片
          mainorgname: '', // 主体资质单位名称
          mainleader: '', // 主体资质负责人
          registernum: '', // 注册号
          registeraddress: '', // 注册地址
          mainexpirationdate: '', //有效期
          tradecert: '0', // 行业资质：暂无（null或者0）,有（1）
          tradeimg: '', // 行业照片
          tradeorgname: '', // 单位名称
          tradeleader: '', // 法定负责人
          licensenum: '', // 许可证编号
          licenseaddress: '', // 许可证地址
          tradeexpirationdate: '', // 有效期
          businessscope: '', // 经营范文
          checkresult: '', // 检查结果
        },
        rules: {
          mainimg: [{ required: true, message: '请上传主体资质照片', trigger: 'change' }],
          mainorgname: [{ required: true, message: '主体资质单位名称未填', trigger: 'blur' }],
          mainleader: [{ required: true, message: '法定人代表名称未填', trigger: 'blur' }],
          registernum: [{ required: true, message: '注册号未填', trigger: 'blur' }],
          registeraddress: [{ required: true, message: '注册地址未填', trigger: 'blur' }],
          mainexpirationdate: [{required: true, message: '有效期未选', trigger: 'change' }],
          tradeimg: [{required: true, message: '请上传行业资质照片', trigger: 'change' }],
          tradeorgname: [{ required: true, message: '单位名称未填', trigger: 'blur' }],
          tradeleader: [{ required: true, message: '法定人代表名称未填', trigger: 'blur' }],
          licensenum: [{ required: true, message: '许可证编号未填', trigger: 'blur' }],
          licenseaddress: [{ required: true, message: '许可证地址未填', trigger: 'change' }],
          businessscope: [{ required: true, message: '许可证地址未填', trigger: 'change' }],
          checkresult: [{ required: true, message: '食品安全等级检查结果未选', trigger: 'change' }],
          tradeexpirationdate: [{ required: true, message: '有效期未选', trigger: 'blur' }]
        }
      }
    },
    methods: {
      toPage(page) {
        let id = this.$route.query.id
        if (page == '1' && id) {
          this.$router.push({path: '/main/busnt/add1', query: {id: id}})
        } else if (page == '3' && id) {
          this.$router.push({path: '/main/busnt/add3', query: {id: id}})
        }
      },
      submitForm(formName) { //提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (this.params.maincert == '0') {
              params.mainimg = ''
              params.mainorgname = ''
              params.mainleader = ''
              params.registernum = ''
              params.registeraddress = ''
              params.mainexpirationdate = ''
            }
            if (this.params.tradecert == '0') {
              params.tradeimg = ''
              params.tradeorgname = ''
              params.tradeleader = ''
              params.licensenum = ''
              params.licenseaddress = ''
              params.tradeexpirationdate = ''
            }
            params.id = this.$route.query.id
            params.updateflage = 2
            if (this.isLongTime) params.mainexpirationdate = ''
            if (this.isLongTime1) params.tradeexpirationdate = ''
            this.issubmitLoading = true
            this.$http.post('/server/business/update', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '提交成功'})
                this.$router.push({path: '/main/busnt/add3', query: {id: params.id}})
              }
            }).finally(err => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入，请检查页面修改再提交', '提交商家失败提示！')
            return false
          }
        })
      },
      getShopList() {
        const params = {id: this.$route.query.id }
        this.infoLoading = true
        this.$http.get('/server/business/info?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            const row = res.data.data
            this.params.maincert = row.maincert.toString() || '0'
            this.params.mainimg = row.mainimg || ''
            this.params.mainorgname = row.mainorgname || ''
            this.params.mainleader = row.mainleader || ''
            this.params.registernum = row.registernum || ''
            this.params.registeraddress = row.registeraddress || ''
            this.params.mainexpirationdate = row.mainexpirationdate || ''
            this.params.tradecert = row.tradecert.toString() || '0'
            this.params.tradeimg = row.tradeimg || ''
            this.params.tradeorgname = row.tradeorgname || ''
            this.params.tradeleader = row.tradeleader || ''
            this.params.licensenum = row.licensenum || ''
            this.params.licenseaddress = row.licenseaddress || ''
            this.params.tradeexpirationdate = row.tradeexpirationdate || ''
            this.params.checkresult = row.checkresult || ''
            this.params.businessscope = row.businessscope || ''
            this.isLongTime = row.mainexpirationdate ? false : true
            this.isLongTime1 = row.tradeexpirationdate ? false : true
          }
        }).finally(() => { this.infoLoading = false })
      },
      catMaxImg(img) { //查看大图
        this.maxImg = img
        this.dialogVisible = true
      }, 
      beforeAvatarUpload1(file) { //上传验证
        this.upimgloading1 = true
        const isImgType = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'image/jpg')
        const isLt5M = (file.size / 1024 / 1024) <= 5
        if (!isImgType) {
          this.$message.error('上传图片只能是JPG/png/jpeg格式!')
          this.upimgloading1 = false
        }
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5M!')
          this.upimgloading1 = false
        }
        return isImgType && isLt5M
      }, 
      beforeAvatarUpload2(file) { //上传验证
        this.upimgloading2 = true
        const isImgType = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'image/jpg')
        const isLt5M = (file.size / 1024 / 1024) <= 5
        if (!isImgType) {
          this.$message.error('上传图片只能是JPG/png/jpeg格式!')
          this.upimgloading2 = false
        }
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5M!')
          this.upimgloading2 = false
        }
        return isImgType && isLt5M
      }, 
      handleAvatarSuccess1(response, file, fileList) { // 获取图片地址
        this.params.mainimg = `${response.data.key}`
        this.upimgloading1 = false
      }, 
      handleAvatarSuccess2(response, file, fileList) {
        this.params.tradeimg = `${response.data.key}`
        this.upimgloading2 = false
      }, 
      handleAvatarError1(response, file, fileList) {
        this.$message.error('上传图片失败，请重试')
        this.upimgloading1 = false
      }, 
      handleAvatarError2(response, file, fileList) {
        this.$message.error('上传图片失败，请重试')
        this.upimgloading2 = false
      }
    }, 
    mounted() {
      if (!this.$route.query.id) {
        this.$router.replace({path: '/main/busnt/addant'})
      } else {
        this.getShopList()
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '/css/header.scss';
  @import '/css/add2.scss';
</style>
